<template>
  <div class="box">
    <h1>我是父亲曹操:{{money}}</h1>
    <button @click="handler">找我的儿子曹植借10元</button>
    <hr>
    <Son ref="son"></Son>
    <hr>
    <Daughter></Daughter>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Son from "@/views/06_ref-children-parent/Son.vue";
import Daughter from "@/views/06_ref-children-parent/Daughter.vue";

let money=ref(1000000);
// 获取子组件示例
let son=ref();

const handler=()=>{
  console.log(son);
  money.value+=10;
  son.value.money-=10;
  son.value.fly();
}

const getMoney=()=>{
  return money.value;
}
const setMoney=(num:number)=>{
  money.value=num;
}

defineExpose({
  getMoney,
  setMoney
})
</script>

<style scoped>
.box{
  width: 100vw;
  height: 500px;
  background: skyblue;
}
</style>